<template>
  <Modal v-model="show" width="1000" title="新增主题">
    <ThemeForm ref="themeForm_ref" :form-data="formData" @on-theme-submit="handleThemeSubmit"></ThemeForm>

    <template #footer>
      <div class="text-center">
        <Button class="ivu-btn--round ml14" @click="close">取消</Button>
        <Button class="ivu-btn--round" type="primary" @click="handleSave">保存</Button>
      </div>
    </template>
  </Modal>
</template>

<script>
import { createForm } from './service'
// request
import { postThemeAdd } from '@/api/manageEnd/theme/themeList.js'
// components
import ThemeForm from './ThemeForm.vue'
export default {
  name: 'ModalCreateTheme',

  components: { ThemeForm },

  props: {
    visible: Boolean,
  },

  data() {
    return {
      formData: createForm({ region: '全国' }),
    }
  },

  computed: {
    show: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      },
    },
  },

  methods: {
    close() {
      this.show = false
      this.formData = createForm({ region: '全国' })
    },

    handleSave() {
      this.$refs['themeForm_ref'].handleFormSubmit()
    },

    async handleThemeSubmit(data) {
      const res = await postThemeAdd(data)
      const status = res.data.status
      if (status === 0) {
        this.$Message.success('新增成功')
        this.$emit('on-add-success')
        this.close()
      } else {
        this.$Message.error(res.data.message || '新增失败，请稍后再试')
      }
    },
  },
}
</script>
